<template>
  <div style="display: flex;line-height: 60px">
    <div style="flex: 1;text-align: left;font-size: 20px">
      <span>"小神探"设备管理系统移动版本</span>
    </div>
    <el-dropdown>
      <i class="el-icon-setting" style="margin-right: 15px"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <span>{{ user.name }}</span>  <!-- 显示用户名 -->
  </div>
</template>

<script>
export default {
  name:"PageHeader",
  data() {
    return {
      user: {
        name: ''
      }
    }
  },
  created() {
    // 组件创建时获取用户信息
    try {
      const userInfo = JSON.parse(localStorage.getItem('user'));
      console.log(localStorage.getItem('user'));
      if(userInfo) {
        this.user.name = userInfo.name || '';
      }
    } catch(error) {
      console.log(error);
    }
  },
  methods:{
    logout(){
      // 清除localStorage里的用户信息
      localStorage.removeItem('user');
      // 重定向到登录页面
      this.$router.push('/login');
    }
  }
}
</script>
